<template>
  <div class="headerPic">
    <Carousel
      v-model="index"
      :autoplay="setting.autoplay"
      :autoplay-speed="setting.autoplaySpeed"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow"
    >
      <CarouselItem v-for="item in imgList" :key="item._id">
        <p class="imgTitle">{{ item.recommendTitle }}</p>
        <a :href="item.recommendSrc">
          <img :src="item.recommendImg" class="headerImg" />
        </a>
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
export default {
  props: ['imgList'],
  data() {
    return {
      index: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 3000,
        dots: 'inside',
        radiusDot: false,
        trigger: 'click',
        arrow: 'hover'
      }
    }
  }
}
</script>

<style lang="css" scoped>
.headerPic {
  height: 300px;
  width: 100%;
  background-color: antiquewhite;
}
.headerImg {
  height: 300px;
  width: 100%;
}
.imgTitle {
  z-index: 2;
  position: absolute;
  left: 46%;
  top: 314px;
  color: #fff;
  font-size: 20px;
}
</style>
